<template>
	<!-- 教师 预习作业 答题详情页面 -->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center mance_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub mance_fd0_0'>
					<view class='flex flex-wrap align-center mance_fd0_0_c0'>
						<text class='fu-iconfont2  mance_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='mance_fd0_0_c1_c0'>{{name}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end mance_fd0_0_c0'>
					</view>
				</view>
			</view>

			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

			<view class="overview">
				<view class="subject">
					<view class="type">
						<view class="name" v-if="type!=3">
							<view class="line"></view>
							{{getTypeName(examObj.type)}}
						</view>
						<view class="name" v-if="type==3">
							<view class="line"></view>
							{{examObj.type_name}}
						</view>
						<view class="number">
							<span>{{examIndex+1}}</span>/{{list.length}}
						</view>
					</view>
					<view class="title" v-html="examObj.question_title">
						<!-- {{examObj.title}} -->
					</view>

					<!--  单多选 选择 -->
					<view v-if="[1,2].includes(+examObj.type) " class="changeBox">
						<!-- -->
						<view :class="getClessName(index)" class="change-item "
							v-for="(item,index) in examObj.question_options" :key="item.label">
							<text class="index">
								{{item.label}}
							</text>
							<view class="content" v-html="item.value">
								<!-- {{item.value.value }} -->
							</view>
						</view>

					</view>
					
					<view v-if="[3].includes(+examObj.type) " class="changeBox">
						<!--  :class="examObj.is_answer==1 && examObj.answer==index?'change-item-active':examObj.is_answer==2 && examObj.value==index?'change-item-cuo':''" -->
						<view :class="getClessNamepd(index)" class="change-item "
							v-for="(item,index) in examObj.question_options" :key="item.label">
							<text class="index">
								{{item.label}}
							</text>
							<view class="content" v-html="item.value">
								<!-- {{item.value.value }} -->
							</view>
						</view>
					</view>

					<!-- 简答 -->
					<view v-if="[4,5].includes(+examObj.type)" class="short-answer">
						<view class="answer" v-html="examObj.answer">
						</view>
					</view>
					<view v-if="[6].includes(+examObj.type)" class="list">
						<view class="flex-direction align-stretch cs_flex_list_fd1_0_c3_c0_c1_ibhf">
							<view class='flex align-center cs_fd1_0_c3_c0_c0_ibhf'
								v-for="(flie, index) in examObj.answer" :key="index">
								<image class='cs_fd1_0_c3_c0_c0_c0_ibhf' mode="aspectFit"
									:src='STATIC_URL+"stcimg/01.png"'></image>
								<text>{{ flie.name }}</text>
								<!-- <image class='cs_fd1_0_c3_c0_c0_c2_ibhf' mode="aspectFit" @tap.stop="$refs.benbenFilesUploadfd1_0_c3_c0_c1.delFile(index)" :src='STATIC_URL+"stcimg/6.png"'></image> -->
							</view>
						</view>
					</view>
				</view>

				<!-- 答案解析 -->
				<view class="analysis">
					<div class="analysistitle">
						<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="@/static/images/img01.png"
							mode="">
						</image>
						答案解析
						<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/images/img01.png"
							mode="">
						</image>
					</div>
					<!--1正确 2错误  3未答  -->
					<view v-if="examObj.is_answer == 1" class="dui">
						<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="@/static/exam/dui.png"
							mode="">
							回答正确
					</view>
					<view v-else-if="examObj.is_answer == 2" class="dui">
						<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="@/static/img02/cuo.png"
							mode="">
							回答错误
					</view>
					<view v-else class="dui">
						<image v-if="!examObj.score && examObj.score !=0"
							style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="@/static/img02/cuo.png"
							mode="">
							{{examObj.score&& examObj.score!=0 ?'已打分':'未计分'}}
					</view>
					<!-- 选择 -->
					<view v-if="[1,2,3].includes(+examObj.type) " class="daan">
						正确答案：<span
							style="margin-right: 88rpx; color: #2860F4 ;">{{getIte(examObj.type,examObj.question_value)}}</span>
						您的答案：<span style="color: #2860F4 ">{{ getIte(examObj.type,examObj.answer)}}</span>
					</view>
					<!-- 填空 -->
					<view v-if="[5].includes(+examObj.type)" class="daan">
						正确答案：<span style="margin-right: 88rpx; color: #2860F4 ;" v-html="examObj.daan"></span>
						<view style="height: 18rpx;"></view>
						您的答案：<span style="color: #2860F4 " v-html="examObj.answer?examObj.answer:'未答'"></span>
					</view>
					<!-- 简答 -->
					<view v-if="[4].includes(+examObj.type)" class="daan">
						正确答案：<span style="margin-right: 88rpx; color: #2860F4 ;" v-html="examObj.question_value"></span>
						<view style="height: 18rpx;"></view>
						您的答案：<span style="color: #2860F4 " v-html="examObj.answer?examObj.answer:'未答'"></span>
					</view>

					<!-- 填空-->
					<!-- 	<view class="daan">
						正确答案：<span style="margin-right: 88rpx; color: #2860F4 ;">{{getIte(examObj.value)}}</span>
						您的答案：<span style="color: #2860F4 ">{{ getIte(examObj.answer)}}</span>
					</view> -->
					<view class="zhishidian-title">
						知识点：
					</view>
					<view class="zhishidian-content">
						{{examObj.zhishidian}}
					</view>
					<view class="zhishidian-title">
						答案解析：
					</view>
					<view class="zhishidian-content">
						<text v-html="examObj.question_analysis"></text>
					</view>

				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3" v-if="type!=3"
				:style=" {height:(150+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<!-- <text @tap.stop="goTop()" :style="{ opacity: examIndex == 0 ? 0.5 : 1 }" class="top">上一题</text>
				<text @tap.stop="goNext()" :style="{ opacity: examIndex+1 == list.length ? 0.5 : 1 }"
					data-type="navigateTo" :data-url="`/pages/exam/examResult/examResult`" class="next">下一题</text> -->
					<!-- <text @tap.stop="opendtk()" :style="{ opacity:  1 }" class="top">答题卡</text> -->
					<view class="dtk" @tap.stop="opendtk()">
						<image style="width: 40rpx;height: 40rpx;" src="/static/exam/ka.png" mode=""></image>
						<view class="">
							答题卡
						</view>
					</view>
				<!-- <view class="pf" v-if="examObj.is_answer==3">
					待批阅
				</view> -->
				<view class="pf" @tap.stop="open(examObj.score)" v-if="!isgraded">
					{{examObj.is_answer!=3?examObj.score + '分':'评分'}}
					<!-- <text v-if="examObj.is_answer!=3">{{?examObj.score + '分':'评分'}}</text>
					<text v-else>{{examObj.is_answer!=3?examObj.score + '分':'评分'}}</text> -->
				</view>
				<view class="pf" @tap.stop="open(examObj.score)" v-if="isgraded">
					{{examObj.score + '分'}}
				</view>
				<view class="pf tj" v-if="(examIndex == list.length - 1 )&& !isgraded" @tap.stop="tjpy" >
					提交
				</view>
			</view>
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3" v-if="type==3"
				:style=" {height:(150+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
					<view class="dtk" @tap.stop="opendtk()">
						<image style="width: 40rpx;height: 40rpx;" src="/static/exam/ka.png" mode=""></image>
						<view class="">答题卡</view>
					</view>
					<view class="dtk" v-if="examObj.is_answer==3 && !isgraded" @tap.stop="open(examObj.score)" >
						<image style="width: 40rpx;height: 40rpx;" src="/static/images/pf.png" mode=""></image>
						<view class="">评分</view>
					</view>
					<view class="pf huipf" @tap.stop="open(examObj.score)" v-if="!isgraded && examObj.is_answer!=3 ">{{examObj.score + '分'}}</view>
				
					<view class="pf huipf" @tap.stop="open(examObj.score)" v-if="isgraded">
						{{examObj.score + '分'}}
					</view>
					<text @tap.stop="goTop()" v-if="type==3" :style="{ opacity: examIndex == 0 ? 0.5 : 1 ,'margin-left':'auto'}" class="top">上一题</text>
					<text @tap.stop="goNext()" style="opacity:1;margin-right:24rpx ;" v-if="examIndex+1!= list.length && !isgraded && type==3"
						data-type="navigateTo" :data-url="`/pages/exam/examResult/examResult`" class="next">下一题</text>
					<text @tap.stop="goNext()" v-if="isgraded && type==3" :style="{ opacity: examIndex+1 == list.length ? 0.5 : 1 ,'margin-right':'24rpx'}"
						data-type="navigateTo" :data-url="`/pages/exam/examResult/examResult`" class="next">下一题</text>	
					<view class="pf tj" v-if="(examIndex == list.length - 1 ) && !isgraded" @tap.stop="tjpy" >
						提交
					</view>
			</view>
			<benben-popup v-model="popupShow1758159673073" :mask="true" :mask-close-able="true" mode='center'
				:z-index='9999' background-color='rgba(0, 0, 0, 0.5)'>
				<!---flex布局2flex布局开始-->
				<view class="flex flex-wrap align-center justify-center benben-flex-layout people_flex_3_ibhf">
					<view class='flex flex-direction align-center people_fd3_0_ibhf'>
						<view class='flex flex-direction align-center justify-center people_fd3_0_c0_ibhf'>
							<text class='people_fd3_0_c0_c0_ibhf'>评分</text>
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="number"
								:placeholder="inputname" confirm-type="done" :maxlength="-1" :adjust-position='true'
								v-model="inputone" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
							<text>分</text>
						</view>

						<view class='flex flex-wrap align-center people_fd3_0_c3_ibhf'>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c0_ibhf'
								@tap.stop="popupShow1758159673073 = false">
								<text>取消</text>
							</view>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c1_ibhf'
								@tap.stop="editfen">
								<text>确认</text>
							</view>
						</view>
					</view>
				</view>
			</benben-popup>
			<!-- 答题卡 -->
			<u-popup custom-style="border-top-left-radius: 24rpx; border-top-right-radius: 24rpx;" :show="isopendtk"
				mode="bottom">
				<view class="answer-sheet">
					<view class="title flex">
						<view class="">答题卡</view>
						<view class="title-right">
							<view class="yuna"></view>
							已评({{graded_num}})
							<view class="yuna" style="background: #FD762E;"></view>
							未评({{not_graded_num}})
						</view>

						<image @tap.stop="isopendtk = false"
							style="width: 24rpx; height: 24rpx;float: right;margin-top: 44rpx;margin-left: auto;"
							src="@/static/exam/close.png" mode=""></image>
					</view>

					<view class="answer-content">
						<view class="">
							<!-- <view class="type"> 5/4</view> -->
							<view class="content">
								<view class="content-ite" @tap.stop="check(index)"
									:class="item.is_answer !=3 ? 'content-ite-other' : '' "
									v-for="(item,index) in list">
									{{index + 1}}
								</view>
							</view>
						</view>

					</view>
				</view>
			</u-popup>
			<view :style="{height: (150+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>


<script>
	export default {
		data() {
			return {
				list: [],
				name: "",
				aid: "",
				answerSheetShow: false,
				exampaper_id: "",
				examIndex: 0, //当前正在做的题下标
				examObj: {}, // 当前正在做的题目
				type: 1, //1 2课后作业 3考试 
				popupShow1758159673073: false,
				inputname: '输入1-100',
				inputone: '',
				isgraded: false, //是否批改
				isopendtk: false, //答题卡弹框
				graded_num:'',//已计分数量
				not_graded_num:'',//未计分数量
				papercourse_id:'',//试卷id

			};
		},
		onLoad(options) {
			this.name=options.name
			this.user_id = options.uid
			this.id = options.id
			this.type=options.type
			if (options.index) {
				this.examIndex = +options.index
			}
			this.aid = options.aid
			this.homework_id = options.homework_id
			this.homeworkreleaserecord_id = options.homeworkreleaserecord_id
			console.log(options.isgraded)
			this.isgraded = options.isgraded?true:false
			console.log(this.isgraded)
			if(this.type==3){
				this.papercourse_id=options.papercourse_id
				this.get_exam_list()
			}else{
				this.get_exam_resolution()
			}

			// this.get_exam_resolution()
		},
		mounted() {},
		methods: {
			// 单多选 选中 未选中颜色
			getClessName(index) {
				console.log(this.examObj.answer)
				if(!this.examObj.answer){
					return ''
				}else{
					// 正确答案显示蓝色
					if (this.examObj.question_value.includes(index)) {
						return 'change-item-active'
					}
					
					if (this.examObj.is_answer == 2 && this.examObj.answer.includes(index)) {
						return 'change-item-cuo'
					}
				}
				
			},
			// 判断的 选中 未选中颜色
			getClessNamepd(index) {
				console.log(this.examObj.answer)
				// 没有答案
				if(!this.examObj.answer){
					return ''
				}else {
					// 有答案
					if (this.examObj.is_answer == 1 && this.examObj.answer == index) {
						return 'change-item-active'
					}
					if (this.examObj.is_answer == 2 && this.examObj.answer == index) {
						return 'change-item-cuo'
					}
				}
				
			},
			// 单多选判断
			getIte(type, input) {
				const map = ['A', 'B', 'C', 'D', 'E']
				let arr = []
				console.log(input)
				if(!input){
					return '未答'
				}else{
					if (typeof input === 'string') {
						console.log('string')
						let str = input.trim()
						console.log(str)
						// 替换掉中文符号
						str = str
							.replace(/，/g, ',')
							.replace(/[“”]/g, '"')
							.replace(/'/g, '"')
					
						try {
							// 多尝试几层解析
							let parsed = str
							while (typeof parsed === 'string' && parsed.includes('[')) {
								parsed = JSON.parse(parsed)
							}
					
							if (Array.isArray(parsed)) {
								arr = parsed.map(i => Number(i))
							} else if (!isNaN(parsed)) {
								arr = [Number(parsed)]
							}
						} catch (e) {
					
							if (str.includes(',')) {
								arr = str.split(',').map(i => Number(i.trim()))
							} else if (!isNaN(str)) {
								arr = [Number(str)]
							}
						}
					} else if (Array.isArray(input)) {
						console.log('arr')
						arr = input.map(i => Number(i))
					} else if (typeof input === 'number') {
						console.log('number')
						arr = [input]
					}
					
					return arr.map(i => map[i] ?? '').join('')
				}
				
			},
			// 打开答题卡
			opendtk() {
				this.isopendtk = true;
			},
			//答题卡选择某一道题
			check(index){
				this.examIndex=index
				this.examObj = this.list[this.examIndex]
				this.isopendtk=false
			},
			//下一题
			goNext() {
				if (this.examIndex == this.list.length - 1 || this.list.length == 0) return
				this.examIndex++

				this.examObj = this.list[this.examIndex]

				console.log('>>>>>>>>>>>>>>>>', this.examObj);
			},
			goTop() {
				if (this.examIndex == 0) return
				this.examIndex--

				this.examObj = this.list[this.examIndex]
			},
			getTypeName(type) {
				switch (Number(type)) {
					case 1:
						return '单选题';
					case 2:
						return '多选题';
					case 3:
						return '判断题';
					case 4:
						return '简答题';
					case 5:
						return '填空题';
					case 6:
						return '开放题';
					default:
						return '未知题型';
				}
			},
			// 预习跟作业的
			async get_exam_resolution() {

				let res = await this.$api.get(global.apiUrls.post68d11e22dbc57, {
					homework_id: this.homework_id,
					homeworkreleaserecord_id: this.homeworkreleaserecord_id,
					user_id: this.user_id
				});

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.graded_num=0
				this.not_graded_num=0
				this.list = res.data.data.map(item => {
					if(item.is_answer ==3){
						this.not_graded_num ++ 
					}
					item.type = item.question_type == 'radio' ? 1 : item.question_type == 'selected' ? 2 : item
						.question_type == 'torf' ? 3 : item.question_type == 'cloze' ? 5 : item
						.question_type == 'open' ? 6 : 4
					if (item.type == 5) {
						item.daan = JSON.parse(item.question_value)[0];
					}
					// console.log(item.type)
					item.answer = JSON.parse(item.answer)
					item.question_value = JSON.parse(item.question_value)

					if (item.type == 5) {
						item.answer = item.answer[0]
					}

					return item
				})
				this.graded_num=this.list.length - this.not_graded_num
				console.log(this.list)
				this.examObj = res.data.data[this.examIndex]
			},
			
			// 考试的
			async get_exam_list() {
			
				let res = await this.$api.post(global.apiUrls.post68e77b6c0b5f2, {
					papercourse_id: this.papercourse_id,
					user_id:this.user_id
				});
			
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.graded_num=0
				this.not_graded_num=0
				this.list = res.data.data.list.map(item => {
					if(item.is_answer ==3){
						this.not_graded_num ++ 
					}
					item.type = item.type == 'radio' ? 1 : item.type == 'selected' ? 2 : item
						.type == 'torf' ? 3 : item.type == 'cloze' ? 5 : item
						.type == 'open' ? 6 : 4
					item.question_title=item.subject
					item.question_options=item.options
					// 
					if(item.type==4){
						item.answer=item.answer_content?JSON.stringify(item.answer_content):''
					}
					if (item.type == 5) {
						item.daan = JSON.parse(item.value)[0];
					}
					console.log(item.answer)
					item.answer = item.answer?JSON.parse(item.answer):''
					item.question_value = JSON.parse(item.value)
			
					if (item.type == 5) {
						item.answer = item.answer?item.answer[0]:''
					}
			
					return item
				})
				this.graded_num=this.list.length - this.not_graded_num
				this.examObj = res.data.data.list[this.examIndex]
			},
			
			// 提交评语
			tjpy(){
				let iswpg=false
				this.list.map(item=>{
					if(item.is_answer==3){
						iswpg=true
					}
				})
				if(iswpg){
					this.$message.info('您还有未批阅的题')
					return
				}
				let aid=this.aid
				if(this.type==3){
					aid=this.papercourse_id
				}
				uni.redirectTo({
					url:'/pages/kc/teacherjspy/teacherjspy?aid='+aid+'&uid='+this.user_id+'&usertype='+this.type
				})
			},
			open(fen) {
				console.log(this.isgraded)
				if (this.isgraded) {
					console.log(11)
					return
				}
				if (fen) {
					this.inputone = fen
				} else {
					this.inputone = ''
				}
				console.log(fen)
				console.log(fen)
				this.popupShow1758159673073 = true 
				console.log(this.popupShow1758159673073 )
			},
			// 打分 修改分数
			async editfen() {
				if (!this.inputone) {
					this.$message.info('请输入分数')
					return
				}
				let url=global.apiUrls.post68f090830e25b
				if(this.type==3){
					url=global.apiUrls.post68e77bea9e159
				}
				let res = await this.$api.post(url, {
					aid: this.examObj.aid,
					score: this.inputone,
				});
				this.examObj.score = this.inputone
				this.list[this.examIndex].score = this.inputone

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.popupShow1758159673073 = false
				this.$message.info('打分成功')
				if(this.type==3){
					this.get_exam_list()
				}else{
					this.get_exam_resolution()
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
		background-color: #F3F4F8;

	}

	// 答题卡
	.answer-sheet {
		height: 919rpx;
		background: #FFFFFF;
		border-radius: 64rpx 64rpx 0rpx 0rpx;
		margin: 0 24rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 117rpx;
			height: 117rpx;
			text-align: center;
			border-bottom: 2rpx solid #EEEEEE;
		}
		.title-right {
			display: flex;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 37rpx;
			align-items: center;
		
			.yuna {
				width: 16rpx;
				height: 16rpx;
				border-radius: 16rpx;
				background: #145EFD;
				margin-right: 12rpx;
				margin-left: 24rpx;
			}
		}
		
		.answer-content {
			height: 790rpx;
			// background-color: #145EFD;
			overflow-y: auto;

			.type {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-top: 32rpx;
			}

			.content {
				margin-top: 36rpx;
				display: flex;
				flex-wrap: wrap;

				.content-ite {
					width: 84rpx;
					height: 84rpx;
					background: rgba(253, 118, 46, 0.1);
					border: 1px solid #FD762E;
					color: #FD762E;
					border-radius: 84rpx;
					line-height: 84rpx;
					text-align: center;
					font-weight: 400;
					font-size: 32rpx;
					// color: #333333;
					margin: 0 28rpx 36rpx;
				}

				.content-ite-other {
					background: rgba(20, 94, 253, 0.1);
					border: 1rpx solid #145EFD;
					color: #145EFD;
				}
			}
		}

	}

	// 简答
	.short-answer {
		margin-top: 24rpx;
		min-height: 200rpx;
		background: #F8F8FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #EEEEEE;


		.kong {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			margin: 36rpx 0 0 24rpx;
		}

		.answer {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 48rpx;
			margin: 36rpx 24rpx;
		}
	}

	.overview {
		min-height: 500rpx;
		width: 100%;

		.analysis {
			width: 750rpx;
			min-height: 740rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-top: 24rpx;
			padding: 1rpx 24rpx 30rpx;

			.analysistitle {
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 32rpx;
			}

			.dui {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				height: 40rpx;
				display: flex;
				align-items: center;
			}

			.daan {
				min-height: 88rpx;
				background: #F8F8FA;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 32rpx;
				padding: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}

			.zhishidian-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-top: 32rpx;
			}

			.zhishidian-content {
				font-weight: 400;
				font-size: 28rpx;
				color: #707070;
				line-height: 40rpx;
				margin-top: 24rpx;
			}

		}

		.subject {
			padding: 32rpx 24rpx 32rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			// 选项
			.changeBox {
				.change-item {
					margin-top: 36rpx;
					padding: 19rpx 23rpx;
					background: #F8F8FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					align-items: center;
					border: 1rpx solid rgba(20, 94, 253, 0);

					.index {
						width: 48rpx;
						height: 48rpx;
						background: #EBEEF2;
						border-radius: 48rpx;
						font-size: 28rpx;
						color: #333;
						line-height: 48rpx;
						text-align: center;
						flex-shrink: 0;
						margin-right: 20rpx
					}
				}

				.change-item-active {
					background: #EEF6FE;
					border: 1rpx solid #145EFD;

					.index {
						background: #145EFD;
						color: #FFFFFF;
					}
				}

				.change-item-cuo {
					background: rgba(253, 118, 46, 0.1);
					border: 1rpx solid #FD762E;

					.index {
						background: #FD762E;
						color: #FFFFFF;
					}
				}
			}

			.title {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 50rpx;
				margin-top: 44rpx;
				display: flex;
			}

			.type {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;

					.line {
						width: 5rpx;
						height: 32rpx;
						background: #145EFD;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						margin-right: 12rpx;
					}
				}

				.number {
					font-size: 26rpx;
					color: rgba(153, 153, 153, 1);

					span {
						font-size: 32rpx;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

		}
	}

	.coursePro_flex_3 {
		width: 750rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;
		box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
		justify-content: center;

		.coursePro_fd3_0 {
			font-weight: 400;
			font-size: 28rpx;
			color: #145EFD;
			border-radius: 44rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;

		}

		.top {
			width: 157rpx;
			height: 84rpx;
			background: #FFFFFF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			border: 1rpx solid #145EFD;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #145EFD;
			margin-left: 24rpx;
		}
		.dtk{
					margin-left: 56rpx;
					color: #145EFD;
					font-size:28rpx;
					 text-align: center;
				}

		.next {
			width: 157rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #fff;
			margin-left: 24rpx;
		}

		.pf {
			margin-left: auto;
			width: 157rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #fff;
			margin-right: 24rpx;
		}
		.huipf{
			// background-color: #EEEEEE;
			background: linear-gradient(270deg, #EEEEEE 0%, #EEEEEE 100%);
			color: #666666;
		}
		.tj{
			margin-left: 24rpx;
		}
	}



	.mance_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.mance_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.mance_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.mance_fd0_0_c0 {
		width: 120rpx;
	}

	.mance_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.cs_flex_list_fd1_0_c3_c0_c1_ibhf {
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.cs_flex_file_fd1_0_c3_c0_c1_ibhf {
		line-height: 60rpx;
	}

	.cs_flex_text_fd1_0_c3_c0_c1_ibhf {
		color: var(--benbenFontColor2);
	}

	.cs_flex_icon_fd1_0_c3_c0_c1_ibhf {
		z-index: 10;
		color: var(--benbenFontColor2);
		padding: 0rpx 0rpx 0rpx 15rpx;
	}

	.cs_fd1_0_c3_c0_c11_ibhf {
		// border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 32rpx;
		background: url(image-path('stcimg/7.png')) no-repeat;
		// background: var(--benbenbgColor2);
		background-size: 100% auto;
		color: rgba(40, 96, 244, 1);
		line-height: 104rpx;
		text-align: center;
	}

	.cs_fd1_0_c3_c0_c0_ibhf {
		background: url(image-path('stcimg/5.png')) no-repeat;
		background-size: 100% auto;
		width: 702rpx;
		height: 104rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
		color: rgba(27, 37, 64, 1);
		font-size: 28rpx;

		.cs_fd1_0_c3_c0_c0_c0_ibhf {
			width: 48rpx;
			height: 48rpx;
			border-radius: 0rpx;
			margin: 0rpx 24rpx 0rpx 52rpx;
		}

		.cs_fd1_0_c3_c0_c0_c2_ibhf {
			width: 16rpx;
			height: 16rpx;
			border-radius: 0rpx;
			margin: 0rpx 30rpx 0rpx auto;
		}
	}

	.people_flex_3_ibhf {
		width: 622rpx;
		// margin: 0rpx 0rpx 0rpx 64rpx;

		.people_fd3_0_ibhf {
			background: #FFFFFF;
			width: 622rpx;
			height: 530rpx;
			border-radius: 16rpx;

			.people_fd3_0_c0_ibhf {
				margin: 48rpx 0rpx 48rpx 0rpx;

				.people_fd3_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
				}
			}

			.people_fd3_0_c3_ibhf {
				color: var(--benbenFontColor3);
				font-size: 32rpx;
				margin-top: 100rpx;

				.people_fd3_0_c3_c0_ibhf {
					background: #F4F8FD;
					width: 240rpx;
					height: 88rpx;
					margin: 0rpx 44rpx 0rpx 0rpx;
					border-radius: 44rpx;
					color: rgba(20, 94, 253, 1);
					font-size: 32rpx;
				}

				.people_fd3_0_c3_c1_ibhf {
					background: #145EFD;
					width: 240rpx;
					height: 88rpx;
					border-radius: 44rpx;
					color: #fff;
				}
			}

			.people_fd3_0_c1_ibhf {
				border: 1px solid #F2F4F7;
				background: #F6F7FA;
				width: 526rpx;
				height: 84rpx;
				margin: 0rpx 0rpx 24rpx 0rpx;
				border-radius: 12rpx;
				padding: 0 24rpx;
			}
		}
	}
</style>
